<template>
	<div class="indexContainer">
		<el-card class="index-con">


			<div v-for="item in state.subList">
				<div class="li" :class="[item.type === 1 ? 'server' : 'user']">
					<div class="head">{{ item.type === 1 ? "客服回答:" : "我的提问:" }}</div>
					<div class="con">{{ item.content }}</div>
				</div>
			</div>
			<el-row v-if="state.canAsk">
				<div class="lh30">继续提问:</div>
				<el-input v-model="state.content" type="textarea" />
			</el-row>
			<el-row justify="center" class="mt30">
				<el-button v-if="state.canAsk" type="primary" @click="appendQuestion()">继续追问</el-button>
				<el-button v-else type="primary">等待客服回复</el-button>
				<el-button type="danger" @click="endQuestion()">结束问题</el-button>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useIndexApi } from '/@/api/index';
import { useRoute } from "vue-router";
import { ElMessage } from 'element-plus';
import router from '/@/router';
const route = useRoute();
const id = route.query.id
const state = reactive({
	subList: [],
	suggestionId: 0,
	content: '',
	canAsk: false
})


async function getSubQuestion() {
	const res = await useIndexApi().subQuestion({ suggestionId: id });
	if (res) {
		state.subList = res.data
	}
	state.canAsk = state.subList[state.subList.length - 1].type === 1
	// state.suggestionId = state.subList[state.subList.length - 1].suggestion_id

	// state.canAsk = true;
	state.suggestionId = id;
}
async function appendQuestion() {
	if (!state.content) {
		ElMessage('请输入追问问题！');
		return false;
	}
	const res = await useIndexApi().appendQuestion({ suggestionId: state.suggestionId, content: state.content });
	if (res) {
		ElMessage('提交成功')
	}
}
async function endQuestion() {
	const res = await useIndexApi().endQuestion({ suggestionId: state.suggestionId });
	if (res) {
		ElMessage('结束问题成功');
		router.push({ path: '/question/list' })
	}
}
onMounted(() => {
	getSubQuestion();
})


</script>
<style scoped lang="scss">
.index-con {
	margin: 20px;

	.li {
		line-height: 30px;

		&.server {
			text-align: right;
		}

		border-bottom:1px solid #ccc;
		padding:10px;
	}

	.lh30 {
		line-height: 50px;
	}
}
</style>